<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="data_source">
        <title>Basic Usage | Kendo UI Data Source</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn about the most common usage scenarios of the Kendo UI DataSource component.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("framework/datasource/basic-usage.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//framework/datasource/basic-usage.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="basic-usage"><a href="#basic-usage">Basic Usage</a></h1>

<p>The <a href="http://demos.telerik.com/kendo-ui/datasource/index">Kendo UI DataSource component</a> plays a central role in practically all web applications built with Kendo UI. It is an abstraction for using local data—arrays of JavaScript objects—or remote data—web services returning JSON, JSONP, <a href="http://www.odata.org/">oData</a> or XML. This article demonstrates some of the most common scenarios regarding the possibilities for you to apply the DataSource component to your projects.</p>

<h2 id="datasource-for-local-and-remote-data"><a href="#datasource-for-local-and-remote-data">DataSource for Local and Remote Data</a></h2>

<h3 id="create-datasource-for-local-data"><a href="#create-datasource-for-local-data">Create DataSource for Local Data</a></h3>

<p>The example below demonstrates how to create a DataSource for local data.</p>

<h6>Example</h6>

<pre><code>    var movies = [
            { title: "Star Wars: A New Hope", year: 1977 },
            { title: "Star Wars: The Empire Strikes Back", year: 1980 },
            { title: "Star Wars: Return of the Jedi", year: 1983 }
    ];

    var localDataSource = new kendo.data.DataSource({ data: movies });
</code></pre>

<p>The <code>localDataSource</code> variable in the example is a DataSource that is initialized to represent an in-memory cache of the <code>movies</code> array. However, the data represented by the <code>movies</code> array is not loaded in the DataSource until the <code>.read()</code> method is called:</p>

<pre><code>    localDataSource.read();
</code></pre>

<p>When the DataSource is bound to a Kendo UI widget or chart, the explicit invocation may not be necessary. The default configuration of the widgets is set to automatically bind to an associated DataSource. However, this may be overridden, i.e. <code>autoBind</code>.</p>

<h3 id="create-datasource-for-remote-services"><a href="#create-datasource-for-remote-services">Create DataSource for Remote Services</a></h3>

<p>The process of creating a DataSource for remote data differs in several ways from creating a DataSource for a local data:</p>

<ul>
<li>A <code>transport</code> must identify the protocols, URLs of endpoints, and serialization formats for any or all CRUD (Create, Read, Update, Destroy) data operations.</li>
<li>It is optionally required to use a <code>parameterMap</code>, which marshals request parameters to the format of a remote endpoint.</li>
<li>It is optionally configured to use server operations for calculating aggregates, defining filters, and supporting features like grouping, paging, and sorting.</li>
</ul>

<p>The example below demonstrates how to create a DataSource for data from a remote endpoint.</p>

<h6>Example</h6>

<pre><code>    var remoteDataSource = new kendo.data.DataSource({
        type: "odata",
        transport: {
            read: "http://odata.netflix.com/Catalog/Titles"
        }
    });
</code></pre>

<p>The <code>remoteDataSource</code> variable in the example is a DataSource that is initialized to represent an in-memory cache of movie titles from the Netflix catalog service, which employs the <a href="http://www.odata.org/">oData</a> protocol. It is only configured to act as a read-only source of data to any widgets to which it is bound.</p>

<p>As is the case with creating a DataSource for local data, the data provided by the Netflix catalog service is not loaded until the <code>.read()</code> method is called:</p>

<pre><code>    remoteDataSource.read();
</code></pre>

<p>When the DataSource is bound to a Kendo UI widget or chart, the explicit invocation may not be necessary. The default configuration of the widgets is set to automatically bind to an associated DataSource. However, this may be overridden, i.e. <code>autoBind</code>.</p>

<p>The example below demonstrates how to create a DataSource for data from another remote endpoint.</p>

<h6>Example</h6>

<pre><code>    var remoteDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://search.twitter.com/search.json",
                dataType: "jsonp",
                data: {
                    q: function() {
                        return $("#searchFor").val();
                    }
                }
            }
        }
    });
</code></pre>

<p>The DataSource in the example is initialized to represent an in-memory cache of tweets from the search service for Twitter. This endpoint employs a <a href="http://www.json.org/">JSON</a>-based endpoint contact that allows an input parameter <code>q</code> to denote a query string for the search service. Here, its value is provided by an input element on the page.</p>

<p>Operations conducted by the DataSource against this remote endpoint are performed via <a href="http://api.jquery.com/jQuery.ajax/"><code>jQuery.ajax()</code></a> and therefore, are subject to the same security constraints as the ones enforced by the user agent. These security constraints also apply to <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XHRs (XMLHttpRequests)</a> made across different domains. Since this is the case with the example above, the <code>dataType</code> configuration property is set to use <a href="https://en.wikipedia.org/wiki/JSONP">JSONP</a>.</p>

<h2 id="data-filtration"><a href="#data-filtration">Data Filtration</a></h2>

<p>Filtering local data is a trivial task using the DataSource. The component accepts a list of one or more filter expressions. They can be combined by using the <code>and</code> or <code>or</code> logical operators. For more details about the filter expression structure, refer to the documentation on the <a href="/api/javascript/data/datasource#configuration-filter"><code>filter</code></a> configuration option.</p>

<h3 id="local-filtering"><a href="#local-filtering">Local Filtering</a></h3>

<p>Local filtering is convenient for small datasets.</p>

<p>Avoid it when working with large datasets because it might lead to performance issues.</p>

<h6>Example</h6>

<pre data-lang="tab-Data"><code>
        var words = [
            { 'w': 'kendo', 'length': 4 },
            { 'w': 'done', 'length': 4 },
            { 'w': 'keno', 'length': 4 },
            { 'w': 'node', 'length': 5 }
        ];
</code></pre>

<pre data-lang="tab-DataSource"><code>
        var wordsDataSource = new kendo.data.DataSource({
            data: words,
            filter: {
                logic: 'or',
                filters: [
                    { field: 'w', operator: 'contains', value: 'don' },
                    { field: 'length', operator: 'gte', value: 5 }
                ]
            }
        });
</code></pre>

<h3 id="server-filtering"><a href="#server-filtering">Server Filtering</a></h3>

<p>Server filtering is convenient for large datasets.</p>

<p>Be sure to set the <a href="/api/javascript/data/datasource#configuration-schema"><code>schema</code></a> and the <a href="/api/javascript/data/datasource#configuration-filter"><code>filter</code></a> properties as necessary.</p>

<p>The example below features local data but the data returned by the <a href="/api/javascript/data/datasource#configuration-transport"><code>transport</code></a> is going to be evaluated the same way.</p>

<h6>Example</h6>

<pre data-lang="tab-Data"><code>        //the JSON result from "{remote service}"
        {
            result: [
                { 'w': 'done', 'length': 4 },
                { 'w': 'node', 'length': 5 }
            ]
        }
</code></pre>

<pre data-lang="tab-DataSource"><code>
        var wordsDataSource = new kendo.data.DataSource({
            serverFiltering: true,
            transport: {
                read: {
                    url: "{remote service}"
                }
            },
            schema: {
                data: "result"
            },
            filter: {
                logic: 'or',
                filters: [
                    { field: 'w', operator: 'contains', value: 'don' },
                    { field: 'length', operator: 'gte', value: 5 }
                ]
            }
        });
</code></pre>

<h3 id="accent-folding"><a href="#accent-folding">Accent Folding</a></h3>

<p>The DataSource does not support <code>accent folding</code> out of the box. However, it can be easily implemented by using either local or server filtering.</p>

<h4>Using Local Filtering</h4>

<p>The example below demonstrates accent folding with local filtering.</p>

<h6>Example</h6>

<pre><code>&lt;h5&gt;DataSource will display all matching to 'Lo' search value items&lt;/h5&gt;
&lt;div id="result"&gt;&lt;/div&gt;
&lt;script&gt;
var template = kendo.template("&lt;div&gt;#: name #&lt;/div&gt;");

var accentMap = {
  'ó':'o',
  'ø':'o',
  'ö':'o'
};

var accentRegExp = new RegExp(Object.keys(accentMap).join("|"), "ig");

var replace = function(value) {
  return value.replace(accentRegExp, function(match) {
    return accentMap[match] || match;
  });
};

var dataSource = new kendo.data.DataSource({
  change: function() {
            $("#result").html(kendo.render(template, this.view()));
  },
  data: [
    { name: "Fulanito López", age: 30 },
    { name: "Erik Lørgensen", age: 33 },
    { name: "Lorena Smith", age: 20 },
    { name: "James Lö", age: 32 }
  ],
  filter: {
    field: "name",
    operator: function(value, search) {
      return replace(value).indexOf(search) !== -1;
    },
    value: "Lo"
  }
});

dataSource.fetch();
&lt;/script&gt;
</code></pre>

<h4>Using Server Filtering</h4>

<p>The example below demonstrates accent folding with server filtering.</p>

<h6>Example</h6>

<pre data-lang="tab-Data"><code>        //the 'accent folding' is done on the server
        {
            result: [
                { name: "Fulanito López", age: 30 },
                { name: "Erik Lørgensen", age: 33 },
                { name: "Lorena Smith", age: 20 },
                { name: "James Lö", age: 32 }
            ]
        }
</code></pre>

<pre data-lang="tab-DataSource"><code>
        var wordsDataSource = new kendo.data.DataSource({
            serverFiltering: true,
            transport: {
                read: {
                    url: "{remote service}"
                }
            },
            schema: {
                data: "result"
            },

            filter: { field: "name", operator: "contains", value: "Lo" }
        });
</code></pre>

<h2 id="grouped-data-handling"><a href="#grouped-data-handling">Grouped Data Handling</a></h2>

<p>Grouping local data is mostly trivial—you can continue to use the same DataSource you are already familiar with. However, generating grouped data on the server can be difficult when you are unsure of the format the DataSource is expecting.</p>

<h3 id="local-grouping"><a href="#local-grouping">Local Grouping</a></h3>

<p>Local grouping is convenient for small datasets. However, avoid it is working with large datasets for performance reasons.</p>

<h6>Example</h6>

<pre data-lang="tab-Data"><code>
        var words = {
            'count': 4,
            'input': 'kendo',
            'items': [
                { 'w': 'kendo', 'length': 5 },
                { 'w': 'done', 'length': 4 },
                { 'w': 'keno', 'length': 4 },
                { 'w': 'node', 'length': 4 }
            ]
        };
</code></pre>

<pre data-lang="tab-DataSource"><code>
        var wordsDataSource = new kendo.data.DataSource({
            data: words,
            group: { field: 'length', dir: 'desc'},
            schema: { data: 'items' }
        });
</code></pre>

<h3 id="server-grouping"><a href="#server-grouping">Server Grouping</a></h3>

<p>Server grouping is an excellent option when working with large datasets. Be sure to set the <code>schema</code> and <code>group</code> properties as necessary.</p>

<p>The example below features local data but the data returned by a <code>transport</code> is going to be evaluated the same way.</p>

<h6>Example</h6>

<pre data-lang="tab-Data"><code>
        var words = {
            'count': 4,
            'input': 'kendo',
            'groups': [{
                'field': 'length',
                'value': '5',
                'items': [{
                    'w': 'kendo'
                }],
                'hasSubgroups': false,
                'aggregates': {}
            },{
                'field': 'length',
                'value': '4',
                'items': [
                    { 'w': 'done' },
                    { 'w': 'keno' },
                    { 'w': 'node' }
                ],
                'hasSubgroups': false,
                'aggregates': {}
            }]
        };
</code></pre>

<pre data-lang="tab-DataSource"><code>
        var wordsDataSource = new kendo.data.DataSource({
            data: words,
            schema: {
                groups: 'groups'
            },
            group: {
                field: 'length'
            },
            serverGrouping: true
        });
</code></pre>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles on the Kendo UI DataSource component:</p>

<ul>
<li><a href="/framework/datasource/overview">DataSource Overview</a></li>
<li><a href="/framework/datasource/offline">Offline Support</a></li>
<li><a href="/framework/datasource/cors">CORS Data Fetching from Another Domain</a></li>
<li><a href="/framework/datasource/crud">CRUD Data Operations</a></li>
<li><a href="/api/javascript/data/datasource">DataSource JavaScript API Reference</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

